<template>
  <div class="temai">
     <div class="top">
        <img src="https://pic.cdfgsanya.com/assets/upload/visual/1250b774c5c8870103b2339dc0d82003.png" alt="">
        <span>清仓特卖</span>
     </div>
        <ul>
            <li v-for="(v,index) in arr" :key="index"> 
                <img :src="v.img" alt="">
                <p class="m1">{{ v.newprice}}</p>
                <p class="m2">{{ v.oldprice}}</p>
            </li>
        </ul>
  </div>
</template>

<script>
import service from '../../../utils/service'
export default {
   data(){
    return{
        arr:[
        ]
    }
   },
   mounted(){
    service({
        url:'ClearanceSale',
        method:'get',
    }).then((res)=>{
        console.log(res.data);
        this.arr = res.data
    })
   }
}
</script>

<style scoped>
  .temai{
    width: 300px;
    height: 163px;
    background-color:white;
    margin: 10px;
    border-radius: 10px;
  }
  .top{
    line-height: 30px;
    
  }
  .top img{
    height: 20px;
    padding: 5px;
  }
  .top span{
    font-weight: 700;
  }
  ul{
    width: 100%;
    height: 160px;
   
    overflow-x: auto;
  display: -webkit-box;
  /* -webkit-overflow-scrolling: touch; */
  /* margin: 0.5rem 0.5rem; */

  }
  li{
    width:100px;
    float: left;
  }
  li img{
    width: 85px;
    height: 80px;
  }
  li .m1{
   font-size: 14px;
   padding-bottom: 3px;
   text-align: center;
  }
  li .m2{
    font-size: 10px;
    text-align: center;
    color: gray;
    text-decoration: line-through;
  }
</style>